<template>
  <div>
    <h1>Information 消息列表</h1>
    <h2>基础用法</h2>
    <div>
      <Information
        tabs
        :tabData="tabList"
        :isLoad="isLoad"
        :isPullDown="isPullDown"
        :isNoData="isNoData"
        :isNoMore="isNoMore"
        :pullDownText="pullDownText"
        :noMoreText="noMoreText"
        :noDataText="noDataText"
        :clearText="clearText"
        @pull-down="pullDown"
        @tab-change="tabChange"
        @on-clear="clearMsg"
        @on-details="viewDetails"
      >
        <Information-list
          v-for="(item, index) in msgList"
          :key="index"
          :title='item.title'
          :msg="item.msg"
          :date="item.date"
        >
        </Information-list>
      </Information>
    </div>
    <p></p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Information
            tabs
            :tabData=&quot;tabList&quot;
            :isLoad=&quot;isLoad&quot;
            :isPullDown=&quot;isPullDown&quot;
            :isNoData=&quot;isNoData&quot;
            :isNoMore=&quot;isNoMore&quot;
            :pullDownText=&quot;pullDownText&quot;
            :noMoreText=&quot;noMoreText&quot;
            :noDataText=&quot;noDataText&quot;
            :clearText=&quot;clearText&quot;
            @pull-down=&quot;pullDown&quot;
            @tab-change=&quot;tabChange&quot;
            @on-clear=&quot;clearMsg&quot;
            @on-details=&quot;viewDetails&quot;&gt;
         &lt;Information-list
            v-for=&quot;(item, index) in msgList&quot;
            :key=&quot;index&quot;
            :title=&quot;item.title&quot;
            :msg=&quot;item.msg&quot;
            :date=&quot;item.date&quot;
          &gt;
          &lt;/Information-liste&gt;
        &lt;/Information&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {
          data(){
            return{
            }
          },
          methods: {
            viewDetails(val) {
              //do something
            },
            clearMsg (val) {
              //do something
            },
            tabChange (val) {
              this.isLoad = true
              //请求接口
              this.isLoad = false
            },
            pullDown (val) {
              this.isPullDown = true
              this.isNoData = false
              //请求接口

            }
          }
        }
      &lt;/script&gt;
    </pre>

    <h2>自定义消息模板</h2>
    <div>
      <Information
      tabs
       :tabData="tabList"
        :isLoad="isLoad"
        :isPullDown="isPullDown"
        :isNoData="isNoData"
        :isNoMore="isNoMore"
        @pull-down="pullDown"
        @tab-change="tabChange"
        @on-clear="clearMsg"
        @on-details="viewDetails"
      >
        <Information-list
          v-for="(item, index) in msgList"
          :key="index"
          :title='item.title'
          :msg="item.msg"
          :date="item.date"
        >
          <p class="Information-p">{{item.title}}</p>
          <p class="Information-p">{{item.msg}}</p>
          <p class="Information-p">{{item.date}}</p>
        </Information-list>
      </Information>
    </div>
    <p>可以自定义消息模板，在Information-list标签中间添加自定义模板，否则使用默认模板</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Information
            tabs
            :tabData=&quot;tabList&quot;
            :isLoad=&quot;isLoad&quot;
            :isPullDown=&quot;isPullDown&quot;
            :isNoData=&quot;isNoData&quot;
            :isNoMore=&quot;isNoMore&quot;
            @pull-down=&quot;pullDown&quot;
            @tab-change=&quot;tabChange&quot;
            @on-clear=&quot;clearMsg&quot;
            @on-details=&quot;viewDetails&quot;&gt;
        &lt;Information&gt;
          &lt;Information-list
            v-for=&quot;(item, index) in msgList&quot;
            :key=&quot;index&quot;
            :title=&quot;item.title&quot;
            :msg=&quot;item.msg&quot;
            :date=&quot;item.date&quot;
          &gt;
            &lt;p class="notice-p"&gt;{item.title}&lt;/p&gt;
            &lt;p class="notice-p"&gt;{item.msg}&lt;/p&gt;
            &lt;p class="notice-p"&gt;{item.date}&lt;/p&gt;
          &lt;/Information-liste&gt;
        &lt;/Information&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {
          data(){
            return{
              tabData: [],
              isLoad: &quot;false&quot;
              isPullDown: &quot;false&quot;
              isNoData: &quot;false&quot;
            }
          },
          methods: {
            viewDetails(val) {
              //do something
            },
            clearMsg (val) {
              //do something
            },
            tabChange (val) {
              this.isLoad = true
              //请求接口
              this.isLoad = false
            },
            pullDown (val) {
              this.isPullDown = true
              this.isNoData = false
              //请求接口

            }
          }
        }
      &lt;/script&gt;
    </pre>
    <h2>API</h2>
    <p>Notice props</p>
    <Table :columns="tableColumn" :data="tableData"></Table>
    <p>Notice-list props</p>
    <Table :columns="tableColumn" :data="tableData1"></Table>
    <p>Notice events</p>
    <Table :columns="tableColumn1" :data="tableData2"></Table>
  </div>
</template>
<script>
export default {
  name: 'testNotice',
  data () {
    return {
      isLoad: false,
      isPullDown: false,
      tableColumn: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          key: 'explain',
          tooltip: true
        },
        {
          title: '类型',
          key: 'type'
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      tableColumn1: [
        {
          title: '事件名',
          key: 'name'
        },
        {
          title: '说明',
          key: 'explain'
        },
        {
          title: '返回值',
          key: 'callback'
        }
      ],
      tableData: [
        {
          attribute: 'tabs',
          explain: '当tabs为true时，显示消息框的tab切换标签,false为不显示',
          type: 'String',
          default: 'false'
        },
        {
          attribute: 'tabData',
          explain: '需和tabs配合使用，tabData为tab切换标签的配置，意思数组例如：[{label: "通知", id: "notice"}, {label: "已读", id: "read"}], label为tab标签内容，id为对应标识，num当前的',
          type: 'Array',
          default: '空'
        },
        {
          attribute: 'wdith',
          explain: 'notice消息列表的宽度，单位px',
          type: 'Number',
          default: 300
        },
        {
          attribute: 'height',
          explain: 'notice消息列表的高度，单位px',
          type: 'Number',
          default: 400
        },
        {
          attribute: 'isLoad',
          explain: '点击tab时，控制是否正在加载数据，true为显示，false是隐藏',
          type: 'Boolean',
          default: false
        },
        {
          attribute: 'isPullDown',
          explain: '下拉加载时，是否显示正在加载',
          type: 'Boolean',
          default: false
        },
        {
          attribute: 'isNoMore',
          explain: '下拉加载完成后，是否显示没有数据提示',
          type: 'Boolean',
          default: false
        },
        {
          attribute: 'isNoData',
          explain: '点击tab之后，当前列表是否又数据',
          type: 'Boolean',
          default: false
        }

      ],
      tableData1: [
        {
          attribute: 'title',
          explain: '消息的标题',
          type: 'String',
          default: '空'
        },
        {
          attribute: 'msg',
          explain: '消息主体',
          type: 'String',
          default: '空'
        },
        {
          attribute: 'date',
          explain: '消息时间',
          type: 'String',
          default: '空'
        }
      ],
      tableData2: [
        {
          name: 'on-clear',
          explain: '点击清空消息时出发，返回一个Object，当前tab的参数',
          callback: 'Object，例如：{label:"通知"，id: "notice",num:"0"}'
        },
        {
          name: 'pull-down',
          explain: '列表下拉加载更多时触发，返回一个Object，当前tab的参数',
          callback: 'Object，例如：{label:"通知"，id: "notice",num:"0"}'
        },
        {
          name: 'on-details',
          explain: '点击消息事件，返回一个Object，点击的消息详细信息',
          callback: 'Object，例如：{title:"Tom"，msg: "", date: "",num:"0"}'
        },
        {
          name: 'tab-change',
          explain: '点击tab时出发，出发tab-change事件，返回一个Object',
          callback: '返回一个Object，例如：{label:"通知"，id: "notice",num:"0"}'
        }
      ],
      tabList: [
        { id: 'notice', label: '通知', num: 0 },
        { id: 'read', label: '已读', num: 0 },
        { id: 'unread', label: '未读', num: 0 }
      ],
      msgList: [
        { title: '来自 Tom00', msg: '花褪残红青杏小。燕子飞时，绿水人家绕。枝上柳绵吹又少。天涯何处无芳草。墙里秋千墙外道.', date: '2019-09-10', read: false },
        { title: '来自 Tom01', msg: '花褪残红青杏小。燕子飞时，绿水人家绕。枝上柳绵吹又少。天涯何处无芳草。墙里秋千墙外道.', date: '2019-09-10', read: false },
        { title: '来自 Tom02', msg: '花褪残红青杏小。燕子飞时，绿水人家绕。枝上柳绵吹又少。天涯何处无芳草。墙里秋千墙外道.', date: '2019-09-10', read: false },
        { title: '来自 Tom03', msg: '花褪残红青杏小。燕子飞时，绿水人家绕。枝上柳绵吹又少。天涯何处无芳草。墙里秋千墙外道.', date: '2019-09-10', read: false }

      ],
      listNum: 0,
      isNoMore: false,
      isNoData: false,
      pullDownText: '正在加载',
      noMoreText: '没有更多',
      noDataText: '暂无数据',
      clearText: '清空'
    }
  },
  mounted () {
    let data = []
    for (let i = 0; i < this.tabList.length; i++) {
      data[i] = this.tabList[i]
      if (i === 2) {
        data[i].num = 0
      } else {
        data[i].num = i + 1
      }
    }
    setTimeout(() => {
      this.tabList = data
    }, 2000)
  },
  methods: {
    viewDetails (val) {
      this.$router.push('alert')
    },
    clearMsg (val) {
      this.msgList = []
      this.isNoData = true
    },
    tabChange (val) {
      this.isLoad = true
      this.isNoData = false
      this.isPullDown = false
      this.isNoMore = false
      this.msgList = []
      let list = [
        { title: 'Tom', msg: '花褪残红青杏小。燕子飞时，绿水人家绕。枝上柳绵吹又少。天涯何处无芳草。墙里秋千墙外道.', date: '2019-09-10' },
        { title: 'Tom1', msg: '花褪残红青杏小。燕子飞时，绿水人家绕。枝上柳绵吹又少。天涯何处无芳草。墙里秋千墙外道.', date: '2019-09-10' }
      ]
      let list1 = [
        { title: 'Tom', msg: '花褪残红青杏小。燕子飞时，绿水人家绕。枝上柳绵吹又少。天涯何处无芳草。墙里秋千墙外道.', date: '2019-09-10' },
        { title: 'Tom1', msg: '花褪残红青杏小。燕子飞时，绿水人家绕。枝上柳绵吹又少。天涯何处无芳草。墙里秋千墙外道.', date: '2019-09-10' },
        { title: 'Tom2', msg: '花褪残红青杏小。燕子飞时，绿水人家绕。枝上柳绵吹又少。天涯何处无芳草。墙里秋千墙外道.', date: '2019-09-10' },
        { title: 'Tom3', msg: '花褪残红青杏小。燕子飞时，绿水人家绕。枝上柳绵吹又少。天涯何处无芳草。墙里秋千墙外道.', date: '2019-09-10' }
      ]
      setTimeout(() => {
        if (val.id === 'read') {
          this.msgList = list
        } else if (val.id === 'notice') {
          this.msgList = list1
          this.isNoData = false
        } else {
          this.msgList = []
          this.isNoData = true
        }
        this.isLoad = false
      }, 1000)
    },
    pullDown (val) {
      this.isPullDown = true
      this.isNoMore = false
      let tabL = []
      let listD = [
        { title: '来自 Tom1', msg: '花褪残红青杏小。燕子飞时，绿水人家绕。枝上柳绵吹又少。天涯何处无芳草。墙里秋千墙外道.', date: '2019-09-10', read: false },
        { title: '来自 Tom2', msg: '花褪残红青杏小。燕子飞时，绿水人家绕。枝上柳绵吹又少。天涯何处无芳草。墙里秋千墙外道.', date: '2019-09-10', read: false },
        { title: '来自 Tom3', msg: '花褪残红青杏小。燕子飞时，绿水人家绕。枝上柳绵吹又少。天涯何处无芳草。墙里秋千墙外道.', date: '2019-09-10', read: false }
      ]
      setTimeout(() => {
        this.listNum += 1
        this.isPullDown = false
        if (this.listNum < 2) {
          this.msgList = [...this.msgList, ...listD]
          for (let i = 0; i < this.tabList.length; i++) {
            tabL[i] = this.tabList[i]
            if (val.id === tabL[i].id) {
              tabL[i].num += 3
            }
          }
          this.tabList = tabL
        } else {
          this.isNoMore = true
        }
      }, 2000)
    }
  }
}
</script>
<style scoped>
h1 {
  font-size: 18px;
}
h2 {
  font-size: 14px;
  margin-botTom: 10px;
}
code {
  background-color: #aaa;
}
pre {
  font-size: 14px;
}
span {
  margin-left: 10px;
}
p {
  padding: 10px 0;
}
.Information-p {
  font-size: 12px;
  padding: 4px 0;
}
</style>
